<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#div1{width:100px;height:100px; background:red; position:absolute; left:0;top:50px;}
#div2{width:1px;height:300px;background:black;position:absolute; left:300px;top:0;}
    </style>
    <script>
function starMove(){ //首先构造一个运动框架函数
    var oDiv=document.getElementById('div1');
     setInterval(function(){
         var speed=(300-oDiv.offsetLeft)/10;  //控制物体运动的快慢可以通过除的这个数
         //speed=Math.ceil(speed);//物体向右运动，向上取整
         //speed=Math.floor(speed);//物体向左运动，向下取整
//         用下面一行代码解决，两种情况的运动
         speed=speed>0?Math.ceil(speed):Math.floor(speed); //不要忘记了，只要是做缓冲运动，就必须要进行取整

         oDiv.style.left=oDiv.offsetLeft+speed+'px';
//验证一下
         document.title=oDiv.offsetLeft+','+speed;

     },30);
}
    </script>
</head>
<body>
<input type="button" value="开始运动" id="btn1" onclick="starMove()">
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>